<template>
    <view class="tui-container hei-100">
        <scroll-view scroll-y @scrolltolower="_getlist">
            <view class="tui-news-view">
                <view v-if="infoList.List.length === 0" :style="{'margin-top':appheight/3+'px'}">
                    <empty></empty>
                </view>

                <view v-for="(item,index) in infoList.List" v-else :key="index">
                    <tui-list-cell :index="index" @click="detail(item)">
                        <view class="tui-news-flex tui-flex-start">
                            <view class="tui-news-tbox tui-flex-column tui-flex-between tui-h165 tui-pl-20">
                                <view class="tui-news-title">
                                    {{item.titile}}</view>
                                <view class="tui-sub-box">
                                    <view class="tui-sub-source">{{item.createByName}}</view>
                                    <view class="tui-sub-cmt">
                                        <view>发表于:{{item.updateTime}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </tui-list-cell>
                </view>
                <m-loading :loading="infoList.loading" :finished="infoList.finished" v-if="infoList.List.length !== 0">
                </m-loading>
                <u-back-top :scroll-top="scrollTop"></u-back-top>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import mLoading from '@/components/m-loading.vue';
    export default {
        mounted() {
            var t = this
            const appheight = uni.getSystemInfoSync();
            t.appheight = appheight.windowHeight
            t._getlist()

        },
        components: {
            mLoading,
        },
        onPageScroll(e) {
            console.log(e);
            this.scrollTop = e.scrollTop;
        },
        data() {
            return {
                scrollTop: 0,
                appheight: 300,
                infoList: {
                    state: 0,
                    List: [],
                    total: 0,
                    page: 1,
                    rows: 15,
                    loading: 'more',
                    finished: false,
                },
            }
        },

        methods: {
            f_loadalldata(requestParams) {
                var t = this
                return new Promise((res, rej) => {
                    let params = requestParams;
                    setTimeout(() => {
                        t.$api.req_post('staff_grow/sys/annountCement/list', params, 'json', false).then(val => {
                            res(val)
                        })
                    }, 500);
                });
            },
            async _getlist() {
                var t = this
                let navItem = t.infoList;
                console.log(navItem.List);
                if (navItem.finished) return
                if (navItem.loading == 'loading') return;
                //tab切换只有第一次需要加载数据
                // if (source === 'tabChange' && navItem.finished) return;
                navItem.loading = 'loading';
                // 根据实际情况修改自己修改key 
                // 根据实际情况修改自己修改key 
                let res = await t.f_loadalldata({
                    pageNo: navItem.page,
                    pageSize: navItem.rows,
                    msgCategory: 2
                });
                if (res.success) {
                    navItem.loading = 'more';
                    navItem.total = res.result.total;
                    t.infoList.List = t.infoList.List.concat(res.result.records)
                    // res.result.records.forEach(a => {
                    //     t.infoList.List.push(a)
                    // })
                    if (navItem.page > parseInt((navItem.total - 1) / navItem.rows)) {
                        navItem.loading = 'more';
                        navItem.finished = true
                    }
                    navItem.page++;

                } else {
                    navItem.loading = 'nomore';
                    this.$refs.uToast.show({
                        title: '异常错误',
                        type: 'error',
                    })
                    // t.f.alert_err(res)
                }
            },

            detail(e) {
                let index = e.index;
                var t = this
                uni.navigateTo({
                    url: `/pages/notifyinfo/notifyinfo?id=${e.id}`
                });
            }
        },
        //页面相关事件处理函数--监听用户下拉动作
        onPullDownRefresh: function () {
            //延时为了看效果
            this.infoList = {
                state: 0,
                List: [],
                total: 0,
                page: 1,
                rows: 15,
                loading: 'more',
                finished: false,
            }
            this._getlist()
            setTimeout(() => {
                uni.stopPullDownRefresh();
            }, 2000);
        },

        // 页面上拉触底事件的处理函数
        onReachBottom: function () {
            if (this.infoList.finished) return;
            this.infoList.loading = true;
            this._getlist()
        }
    }
</script>

<style>
    .tui-container {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tui-searchbox {
        padding: 16rpx 20rpx;
        box-sizing: border-box;
        background-color: #F2F2F2;
    }

    .tui-rolling-search {
        width: 100%;
        height: 60rpx;
        border-radius: 35rpx;
        padding: 0 40rpx 0 30rpx;
        box-sizing: border-box;
        background: #fff;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        color: #999;
    }

    .tui-swiper {
        font-size: 26rpx;
        height: 60rpx;
        flex: 1;
        padding-left: 12rpx;
    }

    .tui-swiper-item {
        display: flex;
        align-items: center;
    }

    .tui-hot-item {
        line-height: 26rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tui-banner-swiper {
        width: 100%;
        height: 300rpx;
        position: relative;
    }

    .tui-slide-image {
        width: 100%;
        height: 300rpx;
        display: block;
    }

    .tui-banner-title {
        width: 100%;
        height: 100rpx;
        position: absolute;
        z-index: 9999;
        color: #fff;
        bottom: 0;
        padding: 0 30rpx;
        padding-top: 25rpx;
        font-size: 34rpx;
        font-weight: bold;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* #ifdef MP-WEIXIN  */
    .tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
        width: 100%;
        top: 280rpx;
        text-align: right;
        padding-right: 30rpx;
        box-sizing: border-box;
    }

    .tui-banner-swiper .wx-swiper-dot {
        width: 8rpx;
        height: 8rpx;
        display: inline-flex;
        background: none;
        justify-content: space-between;
    }

    .tui-banner-swiper .wx-swiper-dot::before {
        content: '';
        flex-grow: 1;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8rpx;
    }

    .tui-banner-swiper .wx-swiper-dot-active::before {
        background: #5677fc;
    }

    .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
        width: 18rpx;
    }

    /* #endif */

    /* #ifndef MP-WEIXIN */
    >>>.tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
        width: 100%;
        top: 280rpx;
        text-align: right;
        padding-right: 30rpx;
        box-sizing: border-box;
    }

    >>>.tui-banner-swiper .uni-swiper-dot {
        width: 8rpx;
        height: 8rpx;
        display: inline-flex;
        background: none;
        justify-content: space-between;
    }

    >>>.tui-banner-swiper .uni-swiper-dot::before {
        content: '';
        flex-grow: 1;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8rpx;
    }

    >>>.tui-banner-swiper .uni-swiper-dot-active::before {
        background: #5677fc;
    }

    >>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
        width: 18rpx;
    }

    /* #endif */

    .tui-news-flex {
        width: 100%;
        display: flex;
    }

    .tui-flex-start {
        align-items: flex-start !important;
    }

    .tui-flex-center {
        align-items: center !important;
    }

    .tui-flex-column {
        flex-direction: column !important;
    }

    .tui-flex-between {
        justify-content: space-between !important;
    }

    .tui-news-cell {
        display: flex;
        padding: 20rpx 30rpx;
    }

    .tui-news-tbox {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        display: flex;
    }

    .tui-news-picbox {
        display: flex;
        position: relative;
    }

    .tui-w220 {
        width: 220rpx;
    }

    .tui-h165 {
        height: 100rpx;
    }

    .tui-block {
        display: block;
    }

    .tui-w-full {
        width: 100%;
    }

    .tui-one-third {
        width: 33%;
    }

    .tui-news-title {
        width: 100%;
        font-size: 34rpx;
        word-break: break-all;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        box-sizing: border-box;
    }

    .tui-pl-20 {
        padding-left: 20rpx;
    }

    .tui-pt20 {
        padding-top: 20rpx;
    }

    .tui-sub-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #999;
        box-sizing: border-box;
        line-height: 24rpx;
    }

    .tui-sub-source {
        font-size: 26rpx;
    }

    .tui-sub-cmt {
        font-size: 24rpx;
        line-height: 24rpx;
        display: flex;
        align-items: center;
    }


    .tui-scale {
        transform: scale(0.6);
        transform-origin: center center;
    }

    .tui-btm-badge {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 24rpx;
        color: #fff;
        padding: 2rpx 12rpx;
        background: rgba(0, 0, 0, 0.6);
        z-index: 20;
        transform: scale(0.8);
        transform-origin: 100% 100%;
    }

    .tui-video {
        position: absolute;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transform-origin: 0 0;
    }

    .tui-icon {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        padding: 26rpx;
    }
</style>